<template>
    <div class="com"> 
        <!--左侧导航栏-->
        <img :src="user.avatar">
        <ul>
            <li v-for="(item, index) in list"  :key="index" 
            @click="jump(item)"
            :style="{background: item.title == title ?'darkmagenta':''}" >{{item.title}}</li>
        </ul>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default ({
    name:'com',
    data(){
        return{
            user:JSON.parse(localStorage.getItem('user')),
            list:[
                {title:'个人中心',name:'center'},
                {title:'积分商城',name:'integral'},
                {title:'退出',name:'login'},
            ],
            title:'个人中心'
        }
    },
    computed:{
        ...mapState ({
            avatar:state => state.login.avatar,
        }),
    },
   methods:{
       jump(item){
           this.title=item.title;
           if(item.name == 'login'){
                let msg = confirm('确认退出吗？')
                    if(msg){
                        localStorage.clear();
                        this.$router.push({
                        name:item.name
                })
            }
           }else{
               this.$router.push({
               name:item.name
            })
           }
       }
   }
})
</script>
<style lang="scss">
*{
    margin: 0;
    padding: 0;

}
.com{
    width: 300px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background: #323232;
    color:#fff;
    
    img{
        width: 100px;
        border-radius: 50%;
        margin: 100px 120px;
    }
    ul{
        list-style: none;
        li{
            font-size: 18px;
            height: 60px;
            line-height: 60px;
            width: 300px;
            text-align: center;
        }
    }
}
</style>
